<template>
    <div>
        <a-layout id="components-layout-demo-custom-trigger">
            <a-layout-sider
                    :trigger="null"
                    collapsible
                    v-model="collapsed"
            >
                <div class="logo"/>
                <a-menu theme="dark" mode="inline" :defaultSelectedKeys="['/']">
                    <a-menu-item key="/">
                        <router-link to="/">
                            <a-icon type="user"/>
                            <span>home</span>
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="/about">
                        <router-link to="/about">
                            <a-icon type="video-camera"/>
                            <span>nav 2</span>
                        </router-link>
                    </a-menu-item>
                    <a-menu-item key="3">
                        <a-icon type="upload"/>
                        <span>nav 3</span>
                    </a-menu-item>
                </a-menu>
            </a-layout-sider>
            <a-layout>
                <a-layout-header
                        style="background: #001529; padding: 0;display: flex; justify-content: space-between;align-items: center;height: 68px;">
                    <a-icon
                            class="trigger"
                            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
                            @click="()=> collapsed = !collapsed"
                    />
                    <div style="{ color:#fff;display:flex;justify-content:space-between;align-items:center;margin-right:20px;width:200px}">
                        <router-link to='/login'> 退出登录</router-link>
                        <div>{this.name}</div>
                        <img style="width:40px;height:40px" src="http://img.qqzhi.com/uploads/2018-12-06/112700424.jpg"
                             alt=""/>
                    </div>

                </a-layout-header>
                <a-layout-content
                        :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '780px' }">
                    <router-view>

                    </router-view>
                </a-layout-content>
                <a-layout-footer style="text-align: center">
                    Power by <a href="https://gitee.com/xdcenter/wocms" target='_blank'>Wocms</a>
                </a-layout-footer>
            </a-layout>
        </a-layout>
        <a-modal
                title="登录"
                :visible="visible"
                @ok="handleOk"
                :confirmLoading="confirmLoading"
                :closable="closable"
                :maskClosable="closable"
                okText="登录"

        >
            <a-form :form="form">
                <a-form-item
                        label="账号"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 12 }"
                >
                    <a-input v-decorator="['account',{rules: [{ required: true, message: 'Please input your note!' }]}]" />
                </a-form-item>
                <a-form-item
                        label="密码"
                        :label-col="{ span: 5 }"
                        :wrapper-col="{ span: 12 }"
                >
                    <a-input v-decorator="['password',{rules: [{ required: true, message: 'Please input your note!' }]}]" type="password"/>
                </a-form-item>
            </a-form>
        </a-modal>
    </div>
</template>

<script>

  export default {
    name: "Slide",
    data() {
      return {
        name: 'lu',
        collapsed: false,
        avatar: null,
        visible: true,
        confirmLoading: false,
        closable: false,
        form: this.$form.createForm(this),

      }
    },
    methods: {
      handleOk() {
        this.ModalText = 'The modal will be closed after two seconds';
        this.confirmLoading = true;
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values);
          }
          else {

          }
        });
        setTimeout(() => {
          this.visible = false;
          this.confirmLoading = false;
        }, 2000);
      },
    }
  }
</script>

<style>
    #components-layout-demo-custom-trigger .trigger {
        font-size: 18px;
        line-height: 64px;
        padding: 0 24px;
        cursor: pointer;
        transition: color .3s;
        color: #fff;
    }

    #components-layout-demo-custom-trigger .trigger:hover {
        color: #1890ff;
    }

    #components-layout-demo-custom-trigger .logo {
        height: 32px;
        background: rgba(255, 255, 255, .2);
        margin: 16px;
    }
    .dis{
        display: none;
    }
</style>
